<template>
  <UView name="dtu" urlAuth>
    <UViewSearch v-model="searchModel">
      <URow col="search">
        <UInput field="name" label="设备名称" />
        <UInput field="deviceSn" label="设备编号" />
        <USelect field="status" label="设备状态" dict="iot_device_status" :allowClear="true" />
        <UFuncBtn func="query" url="/iot/dtu/view">搜索</UFuncBtn>
        <UFuncBtn func="reset">重置</UFuncBtn>
        <UFuncBtn func="add" url="/iot/dtu/add">新增</UFuncBtn>
      </URow>
    </UViewSearch>
    <UViewModal title="DTU设备管理" :span="[7, 14]" v-model="editModel" :rules="rules" >
      <UInput field="name" label="设备名称" />
      <UInput field="deviceSn" label="dtu编号" extra="dtu第一帧必须是此编号" />
      <UTreeSelect field="deviceTypeId" label="设备类型"
                   url="/iot/deviceType/tree?alias=dtu" labelField="name" valueField="id" />
      <!--        <USelect field="model" label="设备协议" :options="ProtocolType" defaultValue="cus" />-->
      <UInput field="ip" label="设备ip" />
      <UInputNumber field="port" label="设备端口" />
      <template #footer="{model}">
        <UFuncBtn func="cancel">取消</UFuncBtn>
        <UFuncBtn func="submit" url="/iot/dtu/saveOrUpdate" :urlAuth="false"
                  v-auth:or="['iot:dtu:add', 'iot:dtu:edit']">提交</UFuncBtn>
        <UFuncBtn func="reset">重置</UFuncBtn>
      </template>
    </UViewModal>
    <UFormDrawer uid="childView" v-model="childModel" width="78%" :title="'子设备管理('+childModel.name+')'">
      <ULinkView uid="child">
        <UViewSearch>
          <URow col="search">
            <UInput field="name" label="子设备名称" />
            <UInput field="childSn" label="子设备编号" />
            <UFuncBtn func="query" url="/iot/deviceChild/view" :urlAuth="false">搜索</UFuncBtn>
            <UFuncBtn func="reset">重置</UFuncBtn>
            <UFuncBtn func="add" url="/iot/deviceChild/add" :urlAuth="false">新增</UFuncBtn>
          </URow>
        </UViewSearch>
        <UViewTable :columns="childColumns">
          <template #action="{record}">
            <UFuncTag func="edit" :data="record" url="/iot/deviceChild/edit" :urlAuth="false">修改</UFuncTag>
            <UFuncTag func="del" :data="record" url="/iot/deviceChild/del" :urlAuth="false">删除</UFuncTag>
          </template>
        </UViewTable>
        <UViewModal title="子设备管理" :span="[7, 14]" :rules="childRules" @edit="childEdit">
          <UInput label="名称" field="name" />
          <UInput label="设备地址" field="childSn" />
          <USelect label="协议类型" field="protocolType" dict="iot_child_protocol_type" defaultValue="3"/>
          <template #footer="{model}">
            <UFuncBtn func="cancel">取消</UFuncBtn>
            <UFuncBtn func="submit" url="/iot/deviceChild/saveOrUpdate" :urlAuth="false">提交</UFuncBtn>
            <UFuncBtn func="reset">重置</UFuncBtn>
          </template>
        </UViewModal>
      </ULinkView>
    </UFormDrawer>
    <UViewTable :columns="columns" :scroll="{x: 1200}">
      <template #status="{record, value}">
        <a-badge v-if="record.status=='online'" status="processing" :text="value" />
        <a-badge v-else status="warning" :text="value" />
      </template>
      <template #action="{record}">
        <UFuncTag func="edit" :data="record" url="/iot/dtu/edit">修改</UFuncTag>
        <UFuncTag func="edit:set" eid="childView" :data="record" :config="{copy: ['deviceSn', 'name', 'uid']}">子设备</UFuncTag>
        <UFuncTag func="del" :data="record" url="/iot/dtu/del">删除</UFuncTag>
        <UFuncTag func="edit:set" eid="debug" :config="{copy: ['deviceSn', 'id']}" :data="record" url="/iot/dtu/debug">调试</UFuncTag>
      </template>
    </UViewTable>
    <UFormDrawer uid="debug" v-model="debugModel" :title="'DTU设备调试 ('+debugModel.deviceSn+')'"
                 :span="[4, 20]" height="100%" placement="top" :closable="true">
      <ULinkView uid="debugView">
        <UViewSearch>
          <URow col="search">
            <UInput field="name" label="名称" />
            <UInput field="childSn" label="设备编号" />
            <UFuncBtn func="query" url="/iot/deviceChild/view" :urlAuth="false">搜索</UFuncBtn>
            <UFuncBtn func="reset">重置</UFuncBtn>
          </URow>
        </UViewSearch>
        <UViewTable :columns="debugColumns" :scroll="{x: 1000}" size="small">
          <template #cmd="{record}">
            <ASelect v-model:value="record['cmd']" :options="CmdOptions" style="width: 100%" />
          </template>
          <template #start="{record}">
            <AInputNumber v-model:value="record['start']" :defaultValue="0" :min="0" step="1" :max="65535"/>
          </template>
          <template #type="{record}">
            <ASelect v-model:value="record['type']" :options="TypeOptions" style="width: 100%"  />
          </template>
          <template #message="{record}">
            <AInput v-model:value="record['message']" :allowClear="true"/>
          </template>
          <template #action="{record}">
            <AButton size="small" type="primary" @click="() => debugSend(record)">发送</AButton>
          </template>
        </UViewTable>
        <div>
          <span>调试日志</span>
          <AButton type="delete" @click="() => debugInfo = ''" size="small">清除</AButton>
        </div>
        <ATextarea v-model:value="debugInfo" :rows="6" />
      </ULinkView>
    </UFormDrawer>
  </UView>
</template>
<!-- 设备功能 -->
<script>
import {ref, reactive} from "vue";
import UFormDrawer from "@/components/drawer/FormDrawer";
import {mapGetters} from "vuex";
export default {
  name: "DTU",
  components: {UFormDrawer},
  setup() {
    let ProtocolType = [
      {label: '自定义', value: "cus"},
      {label: 'modbus:rtu', value: "rtu"},
      {label: 'modbus:tcp', value: "tcp"},
    ]
    let CmdOptions = [
      {label: '01', value: "1"},
      {label: '02', value: "2"},
    ];
    let TypeOptions = [
      {label: 'short', value: 1},
      {label: 'int', value: 3},
      {label: 'long', value: 8},
      {label: 'float', value: 5},
      {label: 'double', value: 11},
    ]
    let columns = ref([
      {field: "name", title: "设备名称", width: 220},
      {field: "deviceSn", title: "设备编号", width: 220},
      // {field: "model", title: "设备型号"},
      {field: "ip", title: "设备ip", width: 200},
      {field: "port", title: "设备端口", width: 80},
      {field: "createTime", title: "创建时间", type: 'date', format: 'YYYY-MM-DD'},
      {field: "status", title: "设备状态", dict: 'iot_device_status'},
      {field: 'action', title: '操作', width: 280},
    ]);
    let childColumns = ref([
      {field: "name", title: "名称", width: 220},
      {field: "childSn", title: "设备地址", width: 180},
      {field: "protocolType", title: "协议类型", width: 180, dict: 'iot_child_protocol_type'},
      {field: "status", title: "状态", width: 180},
      {field: "action", title: "操作", width: 180},
    ]);
    let debugColumns = ref([
      {field: "name", title: "名称", width: 180},
      {field: "childSn", title: "设备地址", width: 80},
      {field: "protocolType", title: "协议类型", width: 120, dict: 'iot_child_protocol_type'},
      {field: "cmd", title: "指令", width: 80},
      {field: "start", title: "起始地址", width: 120},
      {field: "type", title: "值类型", width: 80},
      {field: "message", title: "自定义报文", width: 360},
      {field: "action", title: "操作", fixed: 'right', width: 100},
    ]);
    let rules = reactive({
      name: {required: true, message: '设备名称必填'},
      status: {required: true, message: '设备状态必填'},
      deviceSn: {required: true, message: '设备编号必填'},
      deviceTypeId: {required: true, message: '设备类型必填'},
    })
    let childRules = reactive({
      name: {required: true, message: '名称必填'},
      childSn: {required: true, message: '设备地址必填'},
      protocolType: {required: true, message: '协议类型必填'},
    })
    /**
     * @type {WebSocket}
     */
    let debugSocket = ref(null);

    let editModel = ref({});
    let searchModel = ref({});
    let debugInfo = ref("");
    let debugModel = ref({deviceSn: null});
    let childModel = ref({deviceSn: null, name: '', uid: null});
    return {columns, rules, editModel, searchModel, ProtocolType, debugModel, debugColumns
      , childColumns, childModel, childRules, debugInfo, debugSocket, CmdOptions, TypeOptions}
  },
  computed: {
    ...mapGetters({
      user: 'sys/user'
    })
  },
  created() {
    this.debugSocket = new WebSocket("ws://localhost:8088/iot/debug?type=dtu");
    this.debugSocket.onmessage = (ev) => {
      this.debugInfo += (ev.data + "\n")
    }
    this.debugSocket.onerror = (a, e) => {
      console.log(e)
    }
  },
  methods: {
    childEdit(editModel) {
      editModel.uid = editModel.uid || this.childModel.uid;
    },
    debugSend(record) {
      this.debugSocket.send(JSON.stringify(record))
    }
  }
}
</script>
<style scoped> </style>